import { GatewayType } from "@/api/interface/iot";
import { getProduct, modifyProduct } from "@/api/modules/iot/product";
import { getProfile } from "@/api/modules/model/profile";
import { getSchema } from "@/api/modules/model/schema";
import PageHeader from "@/components/Frame/PageHeader";
import { SchemaItem } from "@/components/JsonForm/interface";
import OnlineStatus from "@/components/Sansan/OnlineStatus/OnlineStatus";
import DeviceConfig from "@/components/Sansan/Model/gateway/DeviceConfig";
import FuncConfig from "@/components/Sansan/Model/gateway/FuncConfig";
import GatewayConfig from "@/components/Sansan/Model/gateway/GatewayConfig";
import SensorConfig from "@/components/Sansan/Model/gateway/SensorConfig";
import BasicConfig from "@/components/Sansan/Model/product/BasicConfig";
import Navigation from "@/components/Sansan/Model/product/Navigation";
import { IotStore } from "@/stores/modules/iot";
import { SchemaNodeKey } from "@/utils/constants";
import mittBus from "@/utils/mittBus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute } from "vue-router";
import BasicDialog from "./components/basicDialog";
export default defineComponent({
	setup() {
		const route = useRoute();
		const iotStore = IotStore();

		//产品schema
		const schemaInfo = ref<SchemaItem>({});
		provide(SchemaNodeKey.schema, schemaInfo);
		provide(SchemaNodeKey.gatewaySchema, schemaInfo);

		//产品profile
		const prifileInfo = ref<any>({});
		provide(SchemaNodeKey.profile, prifileInfo);

		//产品详情
		const detail = reactive<any>({ detail: {} });
		provide(SchemaNodeKey.detailInfo, detail);
		onMounted(() => {
			mittBus.on("refreshProductDetail", () => {
				init();
			});
			init();
		});
		const init = async () => {
			await initIotData();
			initSchema();
			initProfile();
		};
		//初始化产品信息
		const initIotData = async () => {
			let { result } = await getProduct({ idSn: route.query.id as string });
			detail.detail = result;
		};
		const initSchema = async () => {
			const { result } = await getSchema({ idSn: route.query.id });
			schemaInfo.value = result?.schema || { props: {} };
		};
		const initProfile = async () => {
			const { result } = await getProfile({ idSn: route.query.id });
			prifileInfo.value = result?.profile || {};
		};

		const currNav = ref<string>("");
		const basicDialog = reactive({
			title: "修改产品基本信息",
			visible: false
		});
		const changeNav = (nav: string) => {
			currNav.value = nav;
		};
		const submitBasic = async () => {
			let { success } = await modifyProduct({ ...detail.detail });
			if (success) {
				ElMessage.success("修改产品成功");
				basicDialog.visible = false;
				initIotData();
			} else {
				ElMessage.error("修改产品失败！");
			}
		};
		//停止、启动产品
		const handerBtn = async (type: string) => {
			if (type == "copy") {
				ElMessageBox.alert("复制产品");
				return;
			}
		};
		return () => {
			return (
				<div class="h-full">
					{iotStore.isMaxDetail ? null : (
						<>
							<PageHeader
								showBackText={false}
								v-slots={{
									operate: () => {
										return (
											<>
												<el-button class="iconfont iconbx-skip-next-circle" onClick={() => handerBtn("copy")}>
													复制
												</el-button>
												<el-button type="primary" class="iconfont iconedit" onClick={() => (basicDialog.visible = true)}>
													编辑
												</el-button>
												{/* <SaveClearBtn v-model={basicDialog.visible} /> */}
											</>
										);
									}
								}}
							>
								<span>{detail.detail.name || detail.detail.productModel}</span>
								<OnlineStatus class="ml-4 mr-4" v-model={detail.detail.status} onlineLabel="已发布" offlineLabel="草稿" />
								<el-link
									class="iconfont iconbx-sync ml-2"
									type="primary"
									onClick={() => {
										init();
									}}
								>
									刷新
								</el-link>
							</PageHeader>
							<BasicDialog
								title={basicDialog.title}
								v-model:visible={basicDialog.visible}
								width="800px"
								detail={detail.detail}
								onSubmit={() => {
									submitBasic();
								}}
							></BasicDialog>
						</>
					)}
					{Object.keys(schemaInfo.value).length ? (
						<>
							{/* 导航分类：基本信息、产品参数、产品模型、产品日志 */}
							<Navigation onChange={val => changeNav(val)} />

							<div class="bg-white detail-type-detail">
								{/*基本信息*/}
								{currNav.value == SchemaNodeKey.basic ? <BasicConfig /> : ""}

								{/*网关接入配置*/}
								{currNav.value == SchemaNodeKey.extNavGatewayConfig ? <GatewayConfig type={GatewayType.Product} /> : ""}

								{/*产品配置信息--接入地址、接入端口*/}
								{currNav.value == SchemaNodeKey.extNavDeviceConfig ? <DeviceConfig type={GatewayType.Product} /> : ""}

								{/*产品变量配置--变量字段描述*/}
								{currNav.value == SchemaNodeKey.extNavSensorConfig ? <SensorConfig type={GatewayType.Product} /> : ""}

								{/*产品功能配置--变量字段描述*/}
								{currNav.value == SchemaNodeKey.extNavFuncConfig ? <FuncConfig type={GatewayType.Product} /> : ""}
							</div>
						</>
					) : (
						""
					)}
				</div>
			);
		};
	}
});
